import React, { Component } from 'react';
import '../css/OrganizationCertification.less';
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import axios from  'axios'
@observer class OrganizationCertification extends Component {
    constructor(props) {
        super(props)
        this.state={
            ZuzhiType:1,
            schoolName:'',
            Name:'',
            mobliePhone:'',
            image:'',
            Content:'',
            // 工作室or 工作坊
            WorkName:'',
            // 工作坊核心人物
            HXName:'',
            HXImage:'',
            HXContent:'',
            video:''
        }
    }
    componentDidMount(){
        Mobx.history= this.props.history
        if(Mobx.RenzhengZhnaghao===null){
            axios.get('http://www.niuduxiu.com/member/findbyid.jhtml?id='+Mobx.zhanghao)
                .then((item)=>{
                    Mobx.RenzhengZhnaghao=item.content;
                })
        }
    }
    changeType(item){
        this.setState({
            ZuzhiType:item
        })
    }
    render() {
        return (
            <div className="OrganizationCertification">
                <p className='titleName'>组织认证</p>
                <div className='caozuo'>
                    <p className='title'>选择类型</p>
                    <div className='type'>
                        <span style={{color:this.state.ZuzhiType===1?'#ffc408':'#333'}} onClick={this.changeType.bind(this,1)}>学校</span>
                        <span style={{color:this.state.ZuzhiType===2?'#ffc408':'#333'}} onClick={this.changeType.bind(this,2)}>工作室</span>
                        <span style={{color:this.state.ZuzhiType===3?'#ffc408':'#333'}} onClick={this.changeType.bind(this,3)}>工作坊</span>
                    </div>
                    <p className='title'>学校</p>
                    <div className='input'>
                        <input type="text" placeholder='请输入所属学校的名称'/>
                    </div>
                    <div style={{display:this.state.ZuzhiType===2?'block':'none'}} >
                        <p className='title'>工作室名称</p>
                        <div className='input'>
                            <input type="text" placeholder='请输入工作室名称'/>
                        </div>
                    </div>
                    <div style={{display:this.state.ZuzhiType===3?'block':'none'}} >
                        <p className='title'>工作坊名称</p>
                        <div className='input'>
                            <input type="text" placeholder='请输入工作坊名称'/>
                        </div>
                    </div>
                    <div  style={{display:this.state.ZuzhiType===3?'block':'none'}} >
                        <p className='title'>核心人物名称</p>
                        <div className='input'>
                            <input type="text" placeholder='请输入所属学校的名称'/>
                        </div>
                        <p className='title'>核心人物照片</p>
                        <div className='submitImg'>
                            <img src={require('../img/submit.png')} alt=""/>
                        </div>
                        <p className='title'>组织介绍</p>
                        <div className='input'>
                            <textarea type="text" placeholder='请输入核心人物介绍'/>
                        </div>
                    </div>
                    <p className='title'>联系人</p>
                    <div className='input'>
                        <input type="text" placeholder='请输入所属学校的名称'/>
                    </div>
                    <p className='title'>电话</p>
                    <div className='input'>
                        <input type="text" placeholder='请输入所属学校的名称'/>
                    </div>
                    <p className='title'>上传学校图片</p>
                    <div className='submitImg'>
                        <img src={require('../img/submit.png')} alt=""/>
                    </div>
                    <p className='title'>组织介绍</p>
                    <div className='input'>
                        <textarea type="text" placeholder='请输入组织介绍'/>
                    </div>
                </div>
            </div>
        );
    }
}

export default OrganizationCertification;
